<template>
  <header>
  <div>
    <div id="header">
      <div class="head">
        <a href="###">
          <img src="http://www.jz5158.cn/static/images/%E5%88%87%E5%9B%BE/logo.png" alt="">
       </a>
       <ul class="ul">
         <li v-on:click="node=1">首页</li>
         <li v-on:click="node=2">产品中心</li>
         <li v-on:click="node=3">支持下载</li>
         <li v-on:click="node=4">视频中心</li>
         <li v-on:click="node=5">新闻中心</li>
         <li v-on:click="node=6">关于机制</li>
       </ul>
      </div> 
    </div>
    
    <Shouye v-if="node===1"></Shouye>
    <Main v-if="node===2"></Main>
    <Zhichixiazai v-if="node===3"></Zhichixiazai>
    <Shipin v-if="node===4"></Shipin>
    <Xinwen v-if="node===5"></Xinwen>
    <Guanyujizhi v-if="node===6"></Guanyujizhi>
    <div id="foot">
      <div class="footbox">
        <div class="footleft">
          <ul>
            <h3>关于机知</h3>
            <li><a href="###">企业简介</a></li>
            <li><a href="###">社会文化</a></li>
            <li><a href="###">专利证明</a></li>
          </ul>

          <ul>
            <h3>新闻&咨询</h3>
            <li><a href="###">新闻动态</a></li>
            <li><a href="###">机智大讲堂</a></li>
            <li><a href="###">直播内容</a></li>
          </ul>

          <ul>
            <h3>技术支持</h3>
            <li><a href="###">新闻动态</a></li>
            <li><a href="###">机智大讲堂</a></li>
            <li><a href="###">直播内容</a></li>
            <li><a href="###">安全通告</a></li>
          </ul>

          <ul>
            <h3>产品中心</h3>
            <li><a href="###">股票自动交易软件</a></li>
            <li><a href="###">指标大全</a></li>
            <li><a href="###">会员中心</a></li>
            <li><a href="###">软件定制</a></li>
          </ul>
        </div>
        <div class="footright">
          <div class="footright-left">
            <h6>4008-3132-58</h6>
            <p>周一至周日 9:00-18:30</p>
            <a href="###">
              <p>
                <img src="http://www.jz5158.cn/static/images/%E5%88%87%E5%9B%BE/%E8%81%94%E7%B3%BB%E5%AE%A2%E6%9C%8D.png" alt="">联系客服
              </p>
            </a>
            <div class="erweima">
              <img src="http://www.jz5158.cn/static/images/%E6%9C%BA%E6%99%BA%E8%B4%A2%E7%BB%8F.jpg" alt="">
              <img src="http://www.jz5158.cn/static/images/%E6%9C%BA%E6%99%BA%E8%BD%AF%E4%BB%B6%E5%BE%AE%E4%BF%A1.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>  
  </header>
</template>

<script>
import Main from './Main.vue'
import Shouye from './Shouye.vue'
import Zhichixiazai from './Zhichixiazai.vue'
import Shipin from './Shipin.vue'
import Xinwen from './Xinwen.vue'
import Guanyujizhi from './Guanyujizhi.vue'
export default {
  components:{Main,Shouye,Zhichixiazai,Shipin,Xinwen,Guanyujizhi},
  data(){
    return{
      node:1
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
#header{
  margin: 0 auto;
}
.head{
    height: 50px;
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
    line-height: 50px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.ul{
  float: right;
  width: 80%;
}
.ul li{
  font-size: 16px;
  float: left;
  width: 14%;
}

#foot{
    background-color: #363739;
    padding-bottom: 30px;
    min-width: 1280px;
    margin: 0 auto;
}
.footbox{
    width: 70%;
    margin: 0 auto;
    color: white;
    overflow: hidden;
}
.footleft{
    float: left;
    height: 266px;
    margin-top: 50px;
    width: 70%;
    border-right: 2px solid white;
}
.footleft ul{
    float: left;
    width: 25%;
}
.footleft h3{
  margin-bottom: 35px;
  font-size: 24px;
}
.footleft ul li{
  padding: 0;
  background-color: #363739;
  border-bottom: #363739;
}
.footleft ul li a{
  font-size: 10px;
  color: white;
}
.footright{
    float: right;
    margin-top: 40px;
    text-align: center;
    line-height: 30px;
}
.footright-left h6{
  font-size: 30px;
}
.footright-left p{
  margin-bottom: 10px;
}
.footright-left a>p{
  width: 100%;
    height: 48px;
    border: 2px solid white;
    border-radius: 5px;
    font-size: 21px;
    line-height: 46px;
    color: white;
}
.erweima{
  width: 100%;
  margin-top: 30px;
}
.erweima img{
  margin-left:5px;
  width:100px;
}




/* //指定样式类型 */
/* // yarn add sass sass-loader -D */
/* // nmp i sass sass-loader -D */



</style>